<template>
  <button class="back-btn" @click="$router.replace('/')">返回上一页</button>
  <div class="other-header">
    <h2>组件通信和不常用api的使用</h2>
  </div>
  <div class="other-page">
    <ul class="other-page-left">
      <li class="other-page-left-item" :class="{ active: $route.path.includes(item.path) }"
        v-for="(item, index) in menuList" :key="item.path" @click="$router.push(item.path)">{{ index + 1 }}. {{
          item.meta.title }}</li>
    </ul>
    <div class="other-page-content">
      <RouterView />
    </div>
  </div>
</template>

<script lang='ts' setup>
import { RouterView } from 'vue-router';
import { commRoutes } from '@/router';
const menuList = commRoutes;

</script>

<style scoped lang='scss'>
.back-btn {
  font-size: 14px;
  padding: 8px 18px;
  box-shadow: 0;
  border-radius: 4px;
  border: none;
  background-color: #614ae4;
  color: #fff;
  cursor: pointer;
  position: absolute;
  top: 20px;
  left: 10px;
}

.other-header {
  background-color: #fff;
  padding: 20px;
  margin-top: 10px;
  color: #614ae4;
  text-align: center;
  border-bottom: 1px solid #ccc;
}

.other-page {
  display: flex;
  width: 100%;
  position: absolute;
  top: 122px;
  bottom: 0;
  left: 0;
  right: 0;

  &-left {
    width: 300px;
    border-right: 1px solid #ccc;
    margin: 0;
    padding: 0;

    &-item {
      list-style: none;
      padding: 16px 12px;
      border-bottom: 1px solid #ccc;
      font-size: 14px;
      cursor: pointer;

      &:hover {
        background-color: #938dcf;
        color: #fff;
      }

      &:active {
        background-color: #260bbd;
        color: #fff;
      }
    }

    .active {
      background-color: #614ae4;
      color: #fff;
    }

  }

  &-content {
    flex: 1;
    padding: 20px;
    overflow: auto;
  }
}
</style>
